<template>
	<view :style="{ '--color': color }">
		<view class="topBg bg00 p-re">
			<view class="card thmeBg bor_radius_30 p-ab white">
				<image :src="imgUrl + 'Uploads/User_img/shadingImg.png'" mode="aspectFill" class="wh p-ab"></image>
				<view class="size26 bold padding30">{{ pageData.agent_name }}</view>
				<view class="d-flex m-bot30">
					<view class="text-center w-333">
						<view class="h7">
							<text class="size36 m-right4">{{ pageData.allStoreNum }}</text>
							个
						</view>
						<view>辖区店铺</view>
					</view>
					<view class="text-center w-333">
						<view class="h7">
							<text class="size36 m-right4">{{ pageData.allOrderNum }}</text>
							单
						</view>
						<view>辖区总单量</view>
					</view>
					<view class="text-center w-333">
						<view class="h7">
							<text class="size36 m-right4">{{ pageData.allOrderMoney }}</text>
							元
						</view>
						<view>辖区总流水</view>
					</view>
				</view>
				<view class="d-flex j-se">
					<view class="text-center w-333">
						<view class="h7">
							<text class="size36 m-right4">{{ pageData.mOrderNum }}</text>
							单
						</view>
						<view>上月单量</view>
					</view>
					<view class="text-center w-333">
						<view class="h7">
							<text class="size36 m-right4">{{ pageData.mOrderMoney }}</text>
							元
						</view>
						<view>上月流水</view>
					</view>
					<view class="text-center w-333" @click.stop="toWiths">
						<view class="h7">
							<text class="size36 m-right4">{{ pageData.mIncome }}</text>
							元
						</view>
						<view class="p-re">
							上月收益
							<text class="iconfont icon-a-032 size40 p-ab" v-if="agency == 0"></text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding20 m-top50">
			<!-- <view class="size30 color_33 bold p-left20 p-bot20">辖区店铺</view> -->
			<view class="d-flex p-left20 m-bot30">
				<view class="flex-1 size30 color_33 bold">辖区店铺</view>
				<view class="padding6-20 thmeBg bor_radius_10 white" @click="toUrl('/joinPage/addStore')" v-if="storeList.length">添加店铺</view>
			</view>
			<view class="item bgf8 bor_radius_6 padding20 d-flex m-bot20" v-for="(item, index) in storeList" :key="index" @click="tostoreDetail(item)">
				<image :src="$imgUrls(item.logo)" mode="aspectFill" class="bor_radius_10"></image>
				<view class="p-left20 flex-1">
					<view class="d-flex m-bot10">
						<view class="flex-1">
							<text class="label m-right10 d-inline-block" v-if="item.bussName">{{ item.bussName }}</text>
							<text class="size28 color_33 bold m-right10">{{ item.name }}</text>
						</view>
						<text class="color_33 size26" v-if="item.is_bnt == 1 && item.is_star == 1">三星</text>
						<text class="iconfont icon-tubiao09 thmeColor" @click.stop="toUrl('/joinPage/addStore?store_id=' + item.shop_id)" v-if="item.status == 0"></text>
					</view>

					<view class="d-flex j-sb a-center m-bot10">
						<view class="h6 color_66 flex-1 m-right10">{{ item.address }}</view>
						<view class="size26 color_6d">{{ item.distance }}km</view>
					</view>
					<view class="d-flex j-sb color_66">
						<view class="text-center">
							<view class="size32">{{ item.mOrderNum }}</view>
							<view class="size22">上月单量(单)</view>
						</view>
						<view class="text-center">
							<view class="size32">{{ item.mOrderMoney }}</view>
							<view class="size22">上月流水(元)</view>
						</view>
						<view class="text-center">
							<view class="size32 color_FOD">{{ item.mIncome }}</view>
							<view class="size22">上月收益(元)</view>
						</view>
						<view class="text-center" v-if="item.is_bnt == 1">
							<view class="size32 color_FOD">{{ item.v_money }}</view>
							<view class="size22">余额</view>
						</view>
					</view>
				</view>
			</view>

			<empty v-if="noData" cat="3" msg="暂还没有相关的店铺"></empty>
		</view>

		<view v-if="noData" class="btn flexac thmeBg bor_radius_10 size30 white" @click="toUrl('/joinPage/addStore')">添加店铺</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	props: ['agent_id'],
	data() {
		return {
			imgUrl: this.imgUrl,
			pageData: '',
			storeList: [],
			noData: false,
			showaddStore: false
		};
	},
	async created() {
		this.getAgentInfo();
		if (this.position.longitude == 0) {
			await this.$pop.getLocation();
			if (this.position.longitude) this.getAgentInfo();
		}
		// this.getAgent()
		// if (this.position.longitude == 0) {
		// 	await this.$pop.getLocation()
		// 	if (this.position.longitude) this.getAgent()
		// }
	},
	methods: {
		getAgentInfo() {
			this.$http
				.post({
					url: '/userAgentApi/getAgentInfo',
					data: {
						agent_id: this.agent_id
					}
				})
				.then((res) => {
					if (res.errcode != '100') return this.$Toast(res.msg);
					this.pageData = res.agentInfo;
					this.storeList = res.data || [];
					if (!this.storeList.length) this.noData = true;
				});
		},
		tostoreDetail(Item) {
			if (Item.status == 0) return;
			this.toUrl(`/joinPage/storeDetails?store_id=${Item.shop_id}&agent_id=${this.agent_id}&getType=3`);
		},

		// getAgent() { // 经纬度默认会传
		// 	this.$http.post({
		// 		url: '/osmxcxApi/getAgent',
		// 		data: {
		// 			agent_id: this.agent_id
		// 		}
		// 	}).then(res => {
		// 		this.pageData = res.data.agentInfo
		// 		this.storeList = res.data.storeFind || []
		// 		if (!this.storeList.length) this.noData = true
		// 	})
		// },
		toWiths() {
			if (this.agency == 1) return;
			this.toUrl(`/moneyPage/capital/withdraws`);
		}
	},
	computed: {
		...mapState(['color', 'position'])
	}
};
</script>

<style lang="scss" scoped>
.topBg {
	height: 300rpx;

	.card {
		width: 690rpx;
		height: 320rpx;
		left: 30rpx;
		top: 30rpx;
		z-index: 10;

		image {
			top: 0;
			left: 0;
			z-index: -1; // 解决点击失效问题
		}

		.icon-a-032 {
			left: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
}

.item {
	image {
		width: 120rpx;
		height: 120rpx;
	}

	.label {
		padding: 4rpx 10rpx;
		background: #990000;
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #fff;
	}
}

.btn {
	width: 260rpx;
	height: 80rpx;
	margin: 40rpx auto 0;
}
</style>
